<template>

    <div class="upload-div">
        <el-upload :headers="headers" :accept="accept" class="avatar-uploader"
            :action="action" :show-file-list="false" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload" :on-progress="handleFileUplaodProgress">

            <div class="upload-inner">
                <i v-if="imageUrl" class="el-icon-error delete-icon" @click.stop="deleteClick"></i>
                <div v-if="type == 'image'">
                    <el-image v-if="imageUrl" :src="imageUrl" class="avatar"></el-image>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
            </div>
        </el-upload>

        <div style=" position: absolute; top: 2px; left: 70px; line-height: 25px;">
            <a v-if="imageUrl != '' && type == 'file'" :href="imageUrl" target="_blank">{{ loadingMessage }}</a>
        </div>


    </div>

</template>

<script>


export default {

    data() {
        return {

            uploadProgressShow: false,
            imageUrl: '',

            loadingMessage: '',

            uploadPercentage: 0
        };
    },
    props: {
        value: {
            default: ''
        },
        accept: {
            type: String,
            default: 'image/png,image/jpeg'
        },

        action: {
            type: String,
            default() {
                return this.$ex_default_upload_url;
            }
        },
        downloadUrl: {
            type: String,
            default() {
                return this.$ex_default_download_url;
            }
        },


        type: {
            type: String,
            default() {
                return "image";
            }
        },
        headers: {
            type: Object,
            default() {
                return {};
            }
        }
    },



    watch: {
        value(val, oldValue) {
            if (val) {
                
                this.imageUrl = this.downloadUrl + val;

            } else {
                this.imageUrl = "";
            }
            this.loadingMessage = '查看';
            //this.loadingMessage = val;


        }
    },

    created() {
        if (this.value) {
            this.imageUrl = this.downloadUrl + this.value;
        }
    },

    methods: {
        deleteClick() {
            this.imageUrl = ""
            this.$emit('input', "");
        },
        handleAvatarSuccess(res, file) {

            if (res.code == 0) {

                this.imageUrl = this.downloadUrl + res.data.filePath;

                var ossResourceId = res.data.filePath;

                this.$emit('input', ossResourceId);

                this.fileName = res.data.fileName;

                this.loadingMessage = ossResourceId;

                this.uploadProgressShow = false;

            } else {
                this.$message.error(res.message);
            }

        },

        beforeAvatarUpload(file) {

            if (file.size > 10 * 1024 * 1024) {
                this.$message({
                    message: '文件不能超过10m',
                    type: 'error'
                })
                return false;

            }


            if (this.accept && this.accept.indexOf(file.type) == -1) {

                this.$message({
                    message: '文件类型不允许',
                    type: 'error'
                })
                return false;
            }

            this.uploadPercentage = 0;
            this.loadingMessage = '上传中...';
            this.imageUrl = '';
            this.uploadProgressShow = true;


        },
        handleFileUplaodProgress(event, file, fileList) {
            console.log(event.percent)
            if (!this.uploadProgressShow) {
                this.uploadProgressShow = true;
            }

            this.uploadPercentage = parseInt(event.percent);
        }
    }
}

</script>
<style>
.upload-inner {
    position: relative;
}

.delete-icon {
    position: absolute;
    right: 3px;
    top: 3px;
    color: rgba(0, 0, 0, 0.8);
    font-size: 35px;
    z-index: 50;
}

.delete-icon:hover {

    color: rgba(0, 0, 0, 1);
}
</style>

